<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <button data-action="add">添加</button>
    </div>
    <div id="error" style="color: red; padding: 10px"></div>
    <div id="box"></div>
    <script type="module">
      import PocketBase from "./pocketbase.es.js";

      // 增删改查 curd
      function renderTable(data = []) {
        const html = String.raw;
        return html` <table border="1">
          <thead>
            <tr>
              <th>姓名</th>
              <th>邮箱</th>
              <th>婚姻</th>
              <th>存款</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            ${data
              .map(
                (el) => html` <tr>
                  <td>${el.name}</td>
                  <td>${el.email}</td>
                  <td>${el.marry ? "已婚" : "未婚"}</td>
                  <td>${el.money}</td>
                  <td>
                    <button data-action="edit" data-edit-id="${el.id}">
                      编辑
                    </button>
                    <button data-action="delete" data-delete-id="${el.id}">
                      X
                    </button>
                  </td>
                </tr>`
              )
              .join("")}
          </tbody>
        </table>`;
      }

      // 链接数据库
      const pb = new PocketBase("http://127.0.0.1:8090");

      async function getLists() {
        try {
          const data = await pb.collection("employ").getFullList();
          document.getElementById("box").innerHTML = renderTable(data);
        } catch (error) {}
      }
      getLists();

      document.addEventListener("click", async (e) => {
        const action = e.target.dataset.action;
        if (action !== undefined) {
          // 编辑
          if (action === "edit") {
            const id = e.target.dataset.editId;
            console.log(id);
            try {
              const key = prompt("key?");
              if (key === null) return;
              const value = prompt("value?");
              if (value === null) return;
              const data = {
                [key]: value,
              };
              await pb.collection("employ").update(id, data);
              getLists();
            } catch (error) {
              error.innerHTML = error.message;
            }
          }
          //删除
          if (action === "delete") {
            if (confirm("确定删除？") === false) return;
            const id = e.target.dataset.deleteId;
            try {
              await pb.collection("employ").delete(id);
              getLists();
            } catch (error) {}
          }
          // 添加
          if (action === "add") {
            const data = {};
            data.name = prompt("name", "jack");
            if (data.name === null) {
              return;
            }
            data.email = prompt("email", "jack@qq.com");
            if (data.email === null) {
              return;
            }
            data.age = prompt("age", "20");
            if (data.email === null) {
              return;
            }
            data.marry = JSON.parse(prompt("marry", "true"));
            if (data.marry === null) {
              return;
            }

            data.money = prompt("money", "1000");
            if (data.money === null) {
              return;
            }

            try {
              // 添加
              await pb.collection("employ").create(data);
              getLists(); // 重新刷新
            } catch (error) {}
          }
        }
      });
    </script>
  </body>
</html>
